<template>
    <div class="container" :style="'height: '+docheight+'px'">
        <leftcont></leftcont>
        <div class="righCont">
            <topcont></topcont>
            <div class="content">
                <div class="setCont">
                    <div class="mainTop" style="margin-top:20px">
                        <div class="mainTitle">器材详情</div>
                    </div>
                    <div class="formCont">
                        <div class="formItem">
                            <div class="formName">图号｜代号：</div>
                            <div class="formVal">{{ detailInfo.equipment_code }}</div>
                        </div>
                        <div class="formItem">
                            <div class="formName">器材名称：</div>
                            <div class="formVal">{{ detailInfo.equipment_name }}</div>
                        </div>
                        <div class="formItem">
                            <div class="formName">负责人：</div>
                            <div class="formVal">{{ detailInfo.person }}</div>
                        </div>
                        <div class="formItem">
                            <div class="formName">负责人电话：</div>
                            <div class="formVal">{{ detailInfo.mobile }}</div>
                        </div>
                        <div class="formItem">
                            <div class="formName">器材规格：</div>
                            <div class="formVal">{{ detailInfo.equipment_rule }}</div>
                        </div>
                        <div class="formItem">
                            <div class="formName">所在区域：</div>
                            <div class="formVal">{{ detailInfo.equipment_region }}</div>
                        </div>
                        <div class="formItem">
                            <div class="formName">器材状态：</div>
                            <div class="formVal">
                              <div v-if="detailInfo.equipment_status==1">封存</div>
                              <div class="blueBtn" v-if="detailInfo.equipment_status==2">空载</div>
                              <div class="greenBtn" v-if="detailInfo.equipment_status==3">使用</div>
                              <div class="goldBtn" v-if="detailInfo.equipment_status==4">借用</div>
                              <div class="redBtn" v-if="detailInfo.equipment_status==5">到期</div>
                            </div>
                        </div>
                        <div class="formItem">
                            <div class="formName">过期时间：</div>
                            <div class="formVal">{{ detailInfo.expiration_time }}</div>
                        </div>
                        <div class="formItem">
                            <div class="formName">剩余天数：</div>
                            <div class="formVal">
                              <span class="greenBtn" v-if="detailInfo.day>20">{{ detailInfo.day }}天到期</span>
                              <span class="goldBtn" v-if="detailInfo.day<=20&&detailInfo.day>10">{{ detailInfo.day }}天到期</span>
                              <span class="redBtn" v-if="detailInfo.day<10&&detailInfo.day>0">{{ detailInfo.day }}天到期</span>
                              <span class="redBtn" v-if="detailInfo.day<=0">已过期</span>
                            </div>
                        </div>
                    </div>
                    <div class="tableMain">
                        <div class="payTable">
                            <div class="trendTop">借用记录({{ total }})</div>
                            <div class="tableCont">
                                <div class="tableSerchCont">
                                <div class="serchItem">
                                    <el-select v-model="statusVal" placeholder="请选择器材状态">
                                        <el-option
                                            v-for="(item,index) in statusArr"
                                            :key="index"
                                            :label="item.val"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div class="headBtn">
                                    <btn value="搜索" @click="serchFn"></btn>
                                </div>
                                </div>
                                <el-table
                                :data="tableData"
                                style="width: 100%">
                                <el-table-column
                                    prop="borrow_name"
                                    show-overflow-tooltip
                                    label="借用者姓名"
                                >
                                </el-table-column>
                                <el-table-column
                                prop="borrow_mobile"
                                    label="联系电话"
                                >
                                </el-table-column>
                                <el-table-column
                                    label="器材状态"
                                >
                                    <template slot-scope="scope">
                                      <div class="">
                                        <span class="redBtn" v-if="scope.row.status==1">借用中</span>
                                        <span class="greenBtn" v-if="scope.row.status==2">已归还</span>
                                      </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="borrow_time"
                                    label="借用时间"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="return_time"
                                    label="归还时间"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="day"
                                    label="借用天数"
                                >
                                </el-table-column>
                                </el-table>
                                <div class="pageCont">
                                <el-pagination
                                    background
                                    layout="prev, pager, next"
                                    :page-size="per_page"
                                    :current-page="page"
                                    @current-change="pageFn"
                                    :total="total">
                                </el-pagination>
                                </div>
                            </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </template>
  
  <script>
  import leftcont from '@/components/leftCont.vue'
  import topcont from '@/components/topCont.vue'
  import btn from '@/components/public/btn.vue'
  import defUpImg from '@/components/public/defUpImg.vue'

  import { EquipmentShow,borrowRecord} from '@/http/api'
    export default {
      components: {defUpImg,leftcont,topcont,btn},
      data() {
        return {
            statusArr:[
                {val:'全部',id:''},
                {val:'借用中',id:1},
                {val:'已归还',id:2},
            ],
            statusVal:'',
            detailInfo:{},
            tableData:[],
            page:1,
            per_page:5,
            total:0,
        }
      },
      props: {},
      methods:{
        serchFn(){ 
          this.page = 1
          this.total = 0
          this.getBorrow()
        },
        pageFn(index){
          this.page = index
          this.getBorrow()
        },
        getData(){
            let data  ={
                equipment_id:this.$route.query.id
            }
            EquipmentShow(data).then((res)=>{
            if(res.data.code==1){
                this.detailInfo = res.data.data
            }else{
              this.$message(res.data.msg)
            }
            this.showData = true
          }).catch((err)=>{
            this.showData = true
            this.$message('服务器请求超时')
          });
        },
        getBorrow(){
          let data = {
            page:this.page,
            per_page:this.per_page,
            status:this.statusVal,
            equipment_id:this.$route.query.id
          }
          borrowRecord(data).then((res)=>{
            if(res.data.code==1){
              this.tableData = res.data.data.data //把最新的数组赋值给tableData
              this.total = res.data.data.total
            }else{
              this.$message(res.data.msg)
            }
          })
        }
      },
      mounted(){
      },
      created() {
        this.getData()
        this.getBorrow()
      },
    }
  </script>
  
  <style scoped lang="less">
  .container{
    width: 100%;
    display: flex;
    overflow: hidden;
    .righCont{
      display: flex;
      flex-direction: column;
      flex: 1;
      margin-left: 15px;
      height: 100%;
      width: 10px;
      background-color: #F4F8FF;
      .content{
        padding: 20px;
        box-sizing: border-box;
        width: 100%;
        flex: 1;
        overflow: auto;
        .setCont{
          width: 100%;
          padding: 20px;
          box-sizing: border-box;
          background-color: #fff;
          .mainTop{
            display: flex;
            margin-bottom: 25px;
            align-items: center;
            justify-content: space-between;
            .mainTitle{
              font-size: 16px;
              font-weight: bold;
            }
          }
          .formCont{
            width: 800px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            // font-size: 14px;
            .formItem{
                margin-bottom: 15px;
                display: flex;
                width: 30%;
                align-items: center;
                // justify-content: space-between;
                .formName{
                    width: 120px;
                    margin-right: 15px;
                    text-align: right;
                }
                .formVal{
                    flex: 1;
                    width: 15px;
                    .redBtn{
                      color: #F56C6C;
                    }
                    .blueBtn{
                      color: #96A1FE;
                    }
                    .greenBtn{
                      color: #85CE61;
                    }
                    .blackBtn{
                      color: #666;
                    }
                    .goldBtn{
                      color: goldenrod;
                    }
                }
            }
          }
          .tableMain{
            .payTable{
            margin-top: 20px;
            width: 100%;
            background-color: #fff;
            padding: 15px;
            box-sizing: border-box;
            .trendTop{
                font-weight: bold;
                font-size: 16px;
                cursor: pointer;
            }
            .tableCont{
                width: 100%;
                margin-top: 15px;
                .redBtn{
                    color: #F56C6C;
                }
                .blueBtn{
                    color: #96A1FE;
                }
                .greenBtn{
                    color: #85CE61;
                }
                .blackBtn{
                    color: #666;
                }
                .tableSerchCont{
                width: 100%;
                display: flex;
                justify-content: flex-end;
                margin-bottom: 10px;
                .serchItem{
                    width: 150px;
                    margin-left: 10px;
                }
                .headBtn{
                    margin-left: 10px;
                }
                }
                .goodsImg{
                height: 40px;
                }
                .ctrolBtn{
                display: flex;
                .text_btn{
                    margin: 0 5px;
                    cursor: pointer;
                    font-size: 14px;
                }
                

                }
                .pageCont{
                padding: 30px 0;
                display: flex;
                justify-content: center;
                }
            }
            }
          }
        }
      }
    }
}
  </style>
  <style>
    .el-form-item__content{
        line-height: normal;
    }
</style>